<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

// 计算当前路由的父链
const breadcrumbItems = computed(() => {
  const matchedRoutes = route.matched.filter(route => route.meta && route.meta.title);
  if (matchedRoutes[0].name === 'home') {
    // 如果当前路由是仪表盘页面，只显示“仪表盘”
    return [{ path: '/home', title: '仪表盘' }];
  }
  // 否则，添加首页作为第一个面包屑导航项
  return [{ path: '/home', title: 'HOME' }].concat(
    matchedRoutes.map(route => ({
      path: route.path,
      title: route.meta.title
    }))
  );
});
</script>

<template>
  <el-breadcrumb separator="/" style="margin-left: 16px;">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
      <a v-if="index < breadcrumbItems.length - 1" :href="item.path">{{ item.title }}</a>
      <span v-else class="active">{{ item.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped>
.active {
  font-weight: bold; /* 粗体 */
  color: #1890ff; /* 蓝色 */
}
</style>
